<form name="openapiForm" method="post" action="index.php?app=openapi&ctl=admin_test&act=result">
    <div class="fixed-submit">
        <{button label=$___openapi="提交"|t:'openapi' class="btn-primary" id="openapi-btn"}>
    </div>
    <input type="hidden" name="method1" value="<{$post.apiName}>">
    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="tableform">
        <tr>
           <th>接口地址：</th>
            <td>
                <input type="text" value="<{$url}>" name="url" style="width:300px;" >
            </td>
        </tr>
        <tr>
            <th>接口名称：</th>
            <td><{$post.apiName}></td>
        </tr>
        <tr>
            <th>接口说明：</th>
            <td><{$description.name}></td>
        </tr>
        <tr>
            <th>接口描述：</th>
            <td><{$description.description}></td>
        </tr>
        <tr>
    </table>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="tableform">
        <tr>
            <th>返回格式：</th>
            <td>
                <select id="data-format" name="data_format">
                    <option value="json">json</option>
                    <option value="xml">xml</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><em style="color:red;padding:0 5px 0 0">*</em>标识：</th>
            <td>
                <input type = "text" name="flag" style="width:300px;">
                <span>flag</span>
                <span>[string]</span>
            </td>
        </tr>
        <tr>
            <th><em style="color:red;padding:0 5px 0 0">*</em>密钥：</th>
            <td>
                <input type = "text" name="token" style="width:300px;">
                <span>token</span>
                <span>[string]</span>
            </td>
        </tr>
        <{foreach from=$list item=item key=key}>
        <tr>
            <th><{$item.name}>：</th>
            <td>
                <{if $item.type == "json"}>
                <textarea name="<{$key}>" rows="3" cols="10" style="height:100px; width:300px;resize: vertical;"></textarea>
                <{else}>
                <input type = "text" name = "<{$key}>" style="width:300px;">
                <{/if}>
                <span><{$key}></span>
                <span>[<{$item.type}>]</span>
            </td>
        <tr>
        <{/foreach}>
    </table>
</form>

<script language="javascript" type="text/javascript">
(function() {
    $('openapi-btn').addEvent('click',function() {
        new Request.JSON({
            url:'index.php?app=openapi&ctl=admin_test&act=result',
            method:'post',
            data:this.form,
            onSuccess: function(responseJSON, responseText) {
                
                console.log(responseJSON)
                console.log(responseText)
                $('response').empty();
                $('request').empty();
                $('request').innerHTML = syntaxHighlight(responseJSON.request);
                
                var format = $('data-format').getSelected()[0].value;
                if(format == 'json') {
                    $('response').innerHTML = syntaxHighlight(responseJSON.response);
                } else {
                    $('response').innerHTML = formatXml(responseJSON.response);
                }
            }
        }).send();
    });
    
    /**
     * 格式化JSON
     */
    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
            function(match) {
                let cls = 'hljs-number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'hljs-keyword';
                    } else {
                        cls = 'hljs-string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'hljs-symbol';
                } else if (/null/.test(match)) {
                    cls = 'hljs-section';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            }
        );
    }
    
    /**
     * 格式化xml 高亮显示
     */
    function formatXml (content) {
        let xml_doc = null;
        const formatContent = content.replace(/[\n\r]/g, "");
        try {
            xml_doc = (new DOMParser()).parseFromString(formatContent, 'text/xml');
        } catch (e) {
            return false;
        }

        function build_xml(list, element, level) {
            let t = [];

            /*level 节点层级。方便前面添加多少个空格缩进*/
            for (let i = 0; i < level; i++) {
                t.push('  ');
            }

            t = t.join("");

            list.push(t + '<<span class="hljs-keyword">' + element.nodeName + '</span>>\n');
            for (let i = 0; i < element.childNodes.length; i++) {
                const childLevel = level + 1;
                let childItem = element.childNodes[i];
                let nodeName = childItem.nodeName;
                if (nodeName === '#text') {
                    continue;
                }

                if (childItem.childNodes.length <= 1) {
                    let value = '';
                    if (childItem.childNodes.length === 1) {
                        value = childItem.childNodes[0].nodeValue;
                    }

                    // 将html标签转化成实体
                    value = value ? value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';

                    let value_color = !isNaN(Number(value)) ? 'hljs-number' : 'hljs-string';

                    let value_txt = '<span class="' + value_color + '">' + value + '</span>';
                    let item = t + '  <<span class="hljs-keyword">' + nodeName +
                        '</span>>' + value_txt + '&lt;/<span class="hljs-keyword">' + nodeName + '</span>>\n';
                    list.push(item);
                } else {
                    build_xml(list, element.childNodes[i], childLevel);
                }
            }
            list.push(t + '&lt;/<span class="hljs-keyword">' + element.nodeName + '</span>>\n');
        }

        let list = [];
        build_xml(list, xml_doc.documentElement, 0);
        return list.join("");
    }
})();
</script>